<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 500px;
      padding: 10px;
      font-family: Arial, sans-serif;
    }
    .controls {
      margin-bottom: 15px;
      display: flex;
      gap: 10px;
      align-items: center;
    }
    #searchInput {
      flex: 1;
      padding: 5px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    .button {
      padding: 5px 10px;
      background: #4285f4;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .button:hover {
      background: #3367d6;
    }
    .tab-item {
      margin-bottom: 10px;
      padding: 8px;
      border: 1px solid #eee;
      border-radius: 4px;
      display: flex;
      align-items: flex-start;
    }
    .tab-content {
      flex: 1;
    }
    .title {
      font-weight: bold;
      margin-bottom: 3px;
    }
    .url {
      color: #666;
      word-break: break-all;
      font-size: 0.9em;
    }
    .checkbox {
      margin-right: 10px;
      margin-top: 3px;
    }
    .no-results {
      text-align: center;
      color: #666;
      padding: 20px;
    }
    .select-all {
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
    }
    .select-all input[type="checkbox"] {
      margin: 0;
      cursor: pointer;
    }
    .select-all span {
      user-select: none;
    }
  </style>
</head>
<body>
  <div class="controls">
    <label class="select-all">
      <input type="checkbox" id="selectAllCheckbox">
      <span>全选</span>
    </label>
    <input type="text" id="searchInput" placeholder="搜索标签页...">
    <button id="exportBtn" class="button">导出</button>
    <button id="closeSelectedBtn" class="button">关闭选中</button>
  </div>
  <div id="tabList"></div>
  <script src="popup.js"></script>
</body>
</html> 